<template>
    <div id="system_groups">
        <el-row :gutter="20" style="height: 100%">
            <el-col class="left-col" :span="8" style="height: 100%">
                <div class="grid-content" style="height: 100%">
                    <el-tree
                    highlight-current
                    :data="tableData"
                    :indent="32"
                    node-key="groupId"
                    default-expand-all
                    :expand-on-click-node="false"
                    @node-click="handleNodeClick"
                    style="height: 100%; overflow: auto"
                    ref="groupTree"
                    >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>
                                <span >{{ data.groupName }}</span>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </el-col>
            <el-col :span="16" class="right-col">
                <div class="grid-content" style="height:100%">
                    <el-card class="scroll-card" shadow="never" style="height: 100%;">
                        <div slot="header" class="clearfix" v-if="currentTreeItem">
                            <span>{{currentTreeItem.groupName}}</span>
                            <el-dropdown style="float: right; padding: 3px 0"  trigger="click" @command="handleCommand">
                                <span class="el-dropdown-link" style="color:#549ff8">
                                    基本操作
                                    <i class="el-icon-caret-bottom el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item class="clearfix" icon="el-icon-circle-plus" command="add">添加分组</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div v-if="currentTreeItem" style="overflow: auto">
                            <el-form v-model="currentTreeItem" label-position="left" label-width="80px">
                                <el-form-item label="分组名称:">
                                    {{currentTreeItem.groupName}}
                                </el-form-item>
                                <el-form-item label="分组编码:">
                                    {{currentTreeItem.groupCode}}
                                </el-form-item>
                                <el-form-item label="分组类型:">
                                    {{currentTreeItem.groupType === 0 ? '门店' : '公司'}}
                                </el-form-item>
                                <el-form-item label="创建时间:">
                                    {{currentTreeItem.gmtCreate}}
                                </el-form-item>
                                <el-form-item label="分组ID:">
                                    {{currentTreeItem.groupId}}
                                </el-form-item>
                                <el-form-item label="父级ID:">
                                    {{currentTreeItem.parentId}}
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <addGroup v-if="isShow" :isShow="isShow" :id="parentId" @cancelShow="cancelShow" @getGroupsList="getGroupsList"></addGroup>
    </div>
</template>
<script>
    import addGroup from './addGroup'
    export default {
        components: {addGroup},
        data() {
            return {
                tableData: [],
                currentTreeItem: null,
                isShow: false,
                parentId: ''
            }
        },
        mounted() {
            this.getGroupsList()
        },
        methods: {
            getGroupsList() {
                this.$server.systemControlApi.getSystemGroupsList().then( res => {
                    this.tableData= res.data
                  //  this.handleNodeClick(this.tableData[0])
                   this.$nextTick(() => {

                       if(!this.currentTreeItem){
                           this.handleNodeClick(this.tableData[0]);
                           this.$refs.groupTree.setCurrentKey(this.tableData[0].groupId)
                       }else{
                           this.$refs.groupTree.setCurrentKey(this.currentTreeItem.groupId);//高亮当前编辑选项
                       }
                   })
                })
            },
            cancelShow(title) {
                this.isShow= title
            },
            handleNodeClick(val) {
                this.parentId= val.groupId
                this.currentTreeItem= {
                    groupName: val.groupName,
                    parentId: val.parentId,
                    groupId: val.groupId,
                    groupCode: val.groupCode,
                    groupType: val.groupType,
                    gmtCreate: val.gmtCreate   
                }
            },
            addGroup() {
                this.isShow= true
            },
            handleCommand(command) {
                switch(command){
                    case 'add':
                        this.addGroup();
                        break;
                    case 'edit':
                        this.edit();
                        break;
                    case 'delete':
                        this.remove();
                        break;
                    case 'lock':
                        this.lock();
                        break;
                }
            },
        }
    }
</script>
<style lang="less" scoped>
.el-tree {
    padding: 10px 0;
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

}

.right-col {
    height: 100%;
    position: absolute;
    right: 0;
    top: -1px;
    .message_box {
        height: 100%;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        .title-module {
            margin: 10px 0;
            h3 {
            color: #ff7068;
            text-align: center;
            }
        }
        p.formInfo {
            font-size: 14px;
            color: #7c7c7c;
            line-height: 40px;
        }
    }
}

.isdelete {
    text-decoration: line-through;
    color: #ff7068;
}
.islocked {
    color: #dda350;
}
.moduleStatus {
    font-size: 12px;
    position: relative;
    display: inline-block;
    padding: 0 6px;
}
.moduleStatus::before {
    position: absolute;
    content: "[";
    left: 0;
    top: 0;
}
.moduleStatus::after {
    position: absolute;
    content: "]";
    right: 0;
    top: 0;
}

.treeOptions {
    background: #fff;
    padding: 10px 20px 0;
    .el-checkbox-group {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.currentTree{
    height: calc(100% - 63px);
    overflow-y: auto;
}
</style>